<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 elementUI 样式 -->
    <link rel="stylesheet" href="./element-ui-2.13.0/lib/theme-chalk/index.css">
    <!-- 引入 vue 的js文件： elementUI基于Vue开发，必须在elementUI的js文件之前引入 -->
    <script src="js/vue-v2.6.10.js"></script>
    <!-- 引入elementUI 组件库 -->
    <script src="./element-ui-2.13.0/lib/index.js"></script>
    <style type="text/css">
        .el-header, .el-footer {/*底部和顶部*/
            background-color: #d18e66;
            color: #333;
            text-align: center;
            height: 200px;
        }
        .el-aside {/*侧面*/
            /*background-color: #55e658;*/
            color: #333;
            text-align: center;
            height: 800px;
        }
        .el-main {/*主体*/
            /*background-color: #5fb1f3;*/
            color: #333;
            text-align: center;
            height: 800px;
        }
        a {
            /*设置超链接的颜色和 删除下划线*/
            color: #3c8dbc;
            text-decoration:none;
            display: block;
        }
        .el-menu-item a{
            color: #303133
        }
        .el-menu-item:hover,.el-menu-item.is-active {
            color: #fff;
            background: #0abdfe;
        }
        .el-menu-item:hover a,.el-menu-item.is-active a{
            color: #fff;
        }
        .el-submenu__title:hover{background: none;}
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>顶部</el-header>
        <el-container>
            <el-aside width="200px">
                <!-- default-active="2"  默认选中第一个子菜单, 也就是index=2 的菜单-->
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo">
                    <el-submenu index="1">
                        <template slot="title">
                            <!--选项图标-->
                            <i class="el-icon-location"></i>
                            <span>组件介绍</span>
                        </template>
                        <!--菜单项组-->
                        <el-menu-item-group>
                            <!--菜单项-->
                            <el-menu-item index="1-1">
                                <!--超链接-->
                                <!--target ： 指向显示页面的框架 right是iframe的name值-->
                                <!--点击超链接可以在右侧iframe中显示-->
                                <a href="http://itcast.cn" target="right">传智播客</a>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <a href="http://itheima.com" target="right">黑马程序员</a>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-3">
                                <a href="02-button.html" target="right">按钮</a>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-4">
                                <a href="03-message.html" target="right">消息提示</a>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-5">
                                <a href="04-dialog.html" target="right">弹出框</a>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-6">
                                <a href="05-table&pagination.html" target="right">标签页</a>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-7">
                                <a href="06-form.html" target="right">表格</a>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-8">
                                <a href="07-dropdown.html" target="right">分页</a>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-8">
                                <a href="08-下拉菜单.html" target="right">下拉菜单</a>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <!--菜单项不可点击-->
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <iframe frameborder="0" name="right" width="100%" height="530px"></iframe>
                </el-main>
            </el-container>
        </el-container>
        <el-footer>底部区域</el-footer>
    </el-container>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{},
        methods:{}
    });
</script>
</html>